<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{
            width: 100px;
            height: 200px;
            background: red;
            padding: 10px;
            margin: 20px;
            border: 5px solid;
        }  */

        .container{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin-left: 50px;
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid;
            position: absolute;
            left: 100px;
        }
        .mydiv{
            width: 100px;
            height: 100px;
            border: 10px solid;
        }
        .a{
            width: 100px;
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <!-- <div class="container">
        <div class="box"></div>
    </div> -->
    <div class="a"></div>
        <div class="mydiv"></div>
    <script>
        // 一、元素的尺寸 
        // 1.offset ：获取元素的宽和高 ；offsetWidth、offsetHeight 
        // 注意： offset : 自身的宽高 + 内边距的宽和高 + border宽或者高；
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.offsetWidth);  //宽
        //     console.log(boxEle.offsetHeight); // 高
        // }
        // 2.client : 获取元素的宽或者高 ： clientWidth 、clientHeight
        // client ： 自身的宽或者高 + 内边距 宽或者高；
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.clientWidth);
        //     console.log(boxEle.clientHeight);
        // }

        // 二、元素的偏移量
        // offsetLeft 、offsetTop ：获取元素的偏移量 
        // 1.元素没有定位 相对于页面的偏移量；
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.offsetLeft);
        // }
        // 2.元素有定位，获取到的offset 是相对于父级的偏移量；
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.offsetLeft);
        // }

        // 三、元素的边框 clientLeft / clientTop :元素的边框(border)宽度；
            // var ele = document.querySelector(".mydiv");
            // document.onclick = function(){
            //     console.log(ele.clientLeft);
            //     console.log(ele.clientTop);
            // }

    // 总结： 元素的宽高 offsetWidth/offsetHeight :自身+内边距 + border
                    //  clientWidth/clientHeight ： 自身+内边距
            // 元素的偏移量 offsetLeft/offsetTop :  1.没有定位 ，相对于页面的偏移量 2.有定位相对于父元素的偏移量
                        // clientLeft/clientTop : 左边框和上边框的宽度；


// clientX clientY offsetX offsetY pageX pageY 。。

//四、获取窗口的宽和高  ；innerWidth /innerHeight 包含浏览器滚动条的宽或者高；
// document.onclick = function(){
//     console.log(window.innerWidth);
// }
// 获取不包含浏览器滚动条的宽或者高；
// document.documentElement.clientWidth
// document.documentElement.clientHeight
document.onclick = function(){
    console.log(document.documentElement.clientWidth);
}

    </script>
</body>
</html>